@import '../vars.scss';

.interactionBox {

  position: fixed;

  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);  ///兼容 IOS<11.2/
  padding-bottom: env(safe-area-inset-bottom);
  background: $white;
  left: 0;

}

.operationBox {
  display: flex;
  justify-content: space-between;
  padding-top: rem($padding-2n);
  padding-bottom: rem($padding-2n);
  background-color: $white;
  width: 100vw;
}

.emoji-container {
  // position: fixed;
  // bottom: 0;
  // left: 0;
}

// .textarea {
//   width: 100%;
// }

// .textarea-container {
//   width: 100%;
//   height: 100%;
//   padding: 8px;
// }

.placeholderClass {
  color: $border-color-hover;
}

.inputWrapper {
  display: flex;
  background-color: $text-bg-color2;
  border-radius: $border-radius-small;
  flex: 2;
  justify-content: space-between;
  margin-left: $im-pagebed-padding;
  :global {
    .dzq-input {
      width: 100%;
    }
    .dzq-input__inner {
      border: none;
      background-color: $text-bg-color2;
      border-top-right-radius: unset;
      border-bottom-right-radius: unset;
      &:focus-visible {
        border: none;
      }
    }

    .input-placeholder{
      color: $text-color-placeholder;
    }
  }
}

.tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 $im-space-in-between-btns;
}

.submit {
  display: flex;
  align-items: center;
  margin-left: $im-space-in-between-btns;
  margin-right: $im-pagebed-padding;
}

.submitBtn {
  padding: $padding-2n $padding-4n;
}

.pictureUpload {
  margin-left: $im-space-in-between-btns;
}

.icon {
  color: $text-color-secondary;
}
